import AutoChart from '@/components/Echarts/AutoChart';
// @ts-ignore
import { medicinePlace } from '@/services/api';
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    tooltip: {
      trigger: 'item',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '30%']
    },
    visualMap: {
      type: 'piecewise',
      show: false,
      dimension: 0,
      seriesIndex: 0,
      pieces: [
        {
          gt: 1,
          lt: 3,
          color: '#372f4a'
        },
        {
          gt: 5,
          lt: 7,
          color: '#372f4a'
        },
        {
          gt: 9,
          lt: 11,
          color: '#372f4a'
        },
        {
          gt: 13,
          lt: 15,
          color: '#372f4a'
        },
        {
          gt: 17,
          lt: 19,
          color: '#372f4a'
        },
      ]
    },
    series: [
      {
        name: '数量',
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: '#80a5dc',
          width: 5
        },
        markLine: {
          symbol: ['none', 'none'],
          label: { show: false },
          data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }, { xAxis: 9 }, { xAxis: 11 }, { xAxis: 13 }, { xAxis: 15 }, { xAxis: 17 }, { xAxis: 19 }]
        },
        areaStyle: {},
        data: []
      }
    ]
  });

  useEffect(() => {
    medicinePlace().then((res) => {
      setOptions((draft) => {
        draft.series[0].data = res.data.map((i: API.ChartsData) => {
          return [i.name, Number(i.value)];
        });
      });
    });
  }, []);

  return <AutoChart option={options as any}></AutoChart>;
};
export default ColumnCharts;
